---
slug: ../../Form
---

import Basic from "../../../_samples/main/Form/Basic/Basic.md";
import Groups from "../../../_samples/main/Form/Groups/Groups.md";
import Edit from "../../../_samples/main/Form/Edit/Edit.md";
import Layout from "../../../_samples/main/Form/Layout/Layout.md";
import LabelSpan from "../../../_samples/main/Form/LabelSpan/LabelSpan.md";
import EmptySpan from "../../../_samples/main/Form/EmptySpan/EmptySpan.md";
import LabelsOnTop from "../../../_samples/main/Form/LabelsOnTop/LabelsOnTop.md";
import GroupColumnSpan from "../../../_samples/main/Form/GroupColumnSpan/GroupColumnSpan.md";
import HeaderTextWrapping from "../../../_samples/main/Form/HeaderTextWrapping/HeaderTextWrapping.md";
import ItemColumnSpan from "../../../_samples/main/Form/ItemColumnSpan/ItemColumnSpan.md";
import FreeStyleForm from "../../../_samples/main/Form/FreeStyleForm/FreeStyleForm.md";
import CustomHeader from "../../../_samples/main/Form/CustomHeader/CustomHeader.md";

<%COMPONENT_OVERVIEW%>

## Basic Sample
<Basic />

<%COMPONENT_METADATA%>

## More Samples

### Layout
Use the Form#**layout** property to define the number of columns to distribute the form content by breakpoint.

- S1 M1 L2 XL3 - 1 cols in S, 1 cols in M, 2 cols in L and 3 cols in XL (default layout) 
- S1 M2 L3 XL5 - 1 cols in S, 2 cols in M, 3 cols in L and 5 cols in XL
- S1 M2 L4 XL6 -  1 cols in S, 2 cols in M, 4 cols in L and 6 cols in XL
- S2 M3 L5 XL7 - 2 cols in S, 3 cols in M, 5 cols in L and 7 cols in XL

<Layout />



### Groups
You can define groups via the **ui5-form-group** web component.

<Groups />



### Label Span
Use the **labelSpan** property to define the width proportion of the labels and fields of a FormItem by breakpoint.

For example:

- S12 M4 L4 XL4 - the label takes 1/3 in M, L, XL
- S12 M6 L6 XL6 - the label takes 1/2 in M, L, XL
- S12 M12 L12 XL12 - the label takes the whole line and the texts gows on the next line (in all sizes)

<LabelSpan />


### Empty Span
Use the **emptySpan** property to define the empty space at the FormItem's end.

For example:

- emptySpan="S1 M1 L1 XL1" + labelSpan="S4 M4 L4 XL4" will define "4 | 7 | 1" proportion between the label, the field and the empty space
- emptySpan="S3 M3 L3 XL3" + labelSpan="S4 M4 L4 XL4" will define "4 | 5 | 3" proportion between the label, the field and the empty space

<EmptySpan />


### Labels On Top
Force labels always on top Form#**labelSpan=S12 M12 L12 XL12**.

<LabelsOnTop />



### Edit
The Form has no built-in functionality to transform texts into inputs to implement editable forms. This is delegated to the consumers as shown in the sample.
**Note:** We recommend using "Large" item spacing in "display" mode, and "Normal" for "edit" mode, to avoid "jumping" effect of switching between texts and inputs.

<Edit />



### Column Span

#### FormGroup#**columnSpan**
The FormGroup#columnSpan property defines how many columns the form group should expand to.

<GroupColumnSpan />

#### FormItem#**columnSpan**
The FormItem#**columnSpan** defines to how many columns the form item should expand to.

<ItemColumnSpan />


### Header Text Wrapping

The Form header text **is wrapping** when doesn't fit the available space.

<HeaderTextWrapping />

### Custom Header

The Form provides a **header** slot that allows the usage of custom form header.

<CustomHeader />


### Freestyle Form

<FreeStyleForm />
